<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function(){
		//加载分页页面
		$("#pageId").load("doPageUI",function(){ //#:id选择器   ajax
			doGetObjects();
		});
		/* 在查询按钮上注册点击事件 */
		//不使用$(".btn-search").click的原因是作用域太大了
		$(".input-group-btn .btn-search").on("click",doQueryObjects);
		/* 在删除按钮上绑定点击事件 */
		$(".input-group-btn .btn-delete").on("click",doDeleteObject);
		//为全选按钮注册事件
		$("#checkAll").click(doChangeTbodyCheckBoxState);
		//on可以check不可以可以理解为事件绑定时tbodyId下的单选框没有生成所以无法绑定事件
		//而绑定在tbody上,点击时会检查是否为给定要求的(.cBox),所以事件能绑定上并且会进行检查
		//click为点击事件,change为状态改变事件
		$("#tbodyId").on("change",".cBox",doChangeTheadCheckBoxState)
	});
	
	/* 全选操作 */
	function doChangeTbodyCheckBoxState(){
		//1.获取thead中checkbox对象状态
		var flag = $(this).prop("checked");
		console.log(flag)
		//2.修改tbody中checkbox对象状态
		$("#tbodyId input:checkbox").prop("checked",flag);
	}
	/* 修改全选按钮属性操作 */
	function doChangeTheadCheckBoxState(){
		//获取所有tbody中checkbox对象的状态,并进行逻辑与操作
		var flag = true;
		$("#tbodyId input:checkbox").each(function(){
			flag = flag && $(this).prop("checked");
		});
		//将状态同步到checkAll的状态
		$("#checkAll").prop("checked",flag);
	}
	/* 执行客户端删除按钮的事件 */
	function doDeleteObject(){
		//1.获取页面上选中的checkbox值
		var arr = doGetCheckedIds();
		if(arr.length==0) {
			alert("请先选择要删除的数据!");
			return;
		}
		//2.给出提示信息:您确定删除吗?
		console.log(arr);
		if(!confirm("您确定要删除吗?")) return;
		//3.发送异步请求执行删除
		//3.1定义url
		var url = "/log/doDeleteObject";
		//3.2定义参数
		var params = {"ids":arr.toString()}
		//3.3调用ajax技术发送请求
		$.post(url,params,function(result){
				if(result.state==1){
					alert(result.message);
					doRefreshAfterDeleteOK();
				}else{
					alert(result.message)
				}
			}
		);
	}
	/* 删除以后的刷新操作 */
	function doRefreshAfterDeleteOK(){
		//先判断是否当前查询的是最后一页并且已经全部被删除了
		var pageCurrent = $("#pageId").data("pageCurrent");
		var pageCount = $("#pageId").data("pageCount");
		var allChecked = $("#checkAll").prop("checked");
		if(pageCurrent==pageCount&&allChecked&&pageCount>1){
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		//进行查询刷新
		doGetObjects();
	}
	/* 此方法用于将选中的单选框的id进行提取 */
	function doGetCheckedIds(){
		//1.定义数组	
		var array = [];
		//2.获取checkbox对象,并进行迭代,获取value属性然后存储到数组
		$("#tbodyId input:checkbox").each(function(){
			var cbx = $(this);
			if(cbx.prop("checked")){
				array.push(cbx.val());
			}
		});
		//3.返回存储id的数组
		return array;
	}
	/* 基于查询按钮事件,执行日志信息的查询操作 */
	function doQueryObjects(){
		//1.初始化当前页码值
		$("#pageId").data("pageCurrent",1);
		//2.执行查询操作
		doGetObjects();
	}
	/* 启动ajax异步操作查询用户信息 */
	function doGetObjects(){
		//设置thead中checkbox对象的初始状态
		$("#checkAll").prop("checked",false);
		//获取当前页
		var pageCurrent = $("#pageId").data("pageCurrent");
		//获取username的值
		var uname = $("#searchNameId").val();
		//在js中非0数字,非undefined,非空串,用在boolean表达式中都是true
		if(!pageCurrent) //如果为空(null=false)则取反(true)为属性赋值为首页
			pageCurrent = 1;
		//设置发送给客户端的属性
		var params = {"pageCurrent":pageCurrent};
		if(uname) params.username = uname;
		//设置请求路径
		var url = "log/doFindPagesObjects";
		/* $.getJSON(url,params,function(result){
			doHandlerQueryResponseResult(result);
		}); */
		//简写写法
		$.getJSON(url,params,doHandlerQueryResponseResult);
	}
	//基于响应码做不同事情
	function doHandlerQueryResponseResult(result){
		if(result.state==1){//正常信息
			//1.呈现当前页的用户行为记录
			doSetTableBodyRows(result.data.records);
			//2.呈现当前的分页信息(总记录数,总页数,当前页...)
			//为什么这个方法能定义在page.html中(提高复用性),不止一个模块有分页
			//为什么能调用到?因为在本页加载完成之后已经调用了page页面,所以page页面也包含在了这里
			doSetPagination(result.data);
		}else{
			doHandleQueryResponseError(result.message);
		}
	}
	/* 处理日志查询时服务端响应的错误信息 */
	function doHandleQueryResponseError(message){
		$("#tbodyId").html(` <tr><td colspan="7">${message}</td></tr>`);
		doSetPagination({"rowCount":0,"pageCount":0,"pageCurrent":1})
	}
	
	//将用户行为日志记录呈现在table的tbody位置
	function doSetTableBodyRows(records){
		//1.获取tbody对象,并清空
		var tbody = $("#tbodyId");
		tbody.empty();
		//2.在tbody中追加记录(基于数组的forEach函数,迭代数组(=>)为一个箭头运算符,左边为数组中的一个元素,右边为对这个元素的操作)
		records.forEach(item=>{
			tbody.append(doCreateRow(item));
		});
	}
	function doCreateRow(item){
		return`<tr>
				<td><input type=checkbox class=cBox value=${item.id}></td>
				<td>${item.username}</td>
				<td>${item.operation}</td>
				<td>${item.method}</td>
				<td>${item.params}</td>
				<td>${item.ip}</td>
				<td>${item.time}</td>
			   </tr>`;
	}
</script>
